<template>
	<view class="userPay">
		<navBar isBack backColor="#000000" color="#000000" background="#fff"></navBar>
		
		<view class="contentBox">
			<!-- 商品列表 -->
			<view class="uP_shopList">
				<view class="uP_shopListTit">
					<image src="http://manager.ryz1620.com/static/guide/list.png" mode=""></image>
					商品清单
				</view>
				<view v-for="(item,index) in shopList" :key="index">
					<view class="uP_roomShop">
						<view class="uP_roomNameBorder">
							<view class="uP_roomName">
								<view>
									<image :src="item.store_logo" mode=""></image>
								</view>
								<view class="uP_roomInfo">{{item.store_name}}<p>{{item.roomAddress}}</p></view>
							</view>
							<view class="uP_goRoomInfo">
								<view class="uP_goRoom"><view class="iconfont icon-tubiaozhizuomoban1"></view></view>
							</view>
						</view>
						<view class="uP_shop" v-for="(item1,index1) in item.medical_list">
							<view class="uP_shopInfo">
								<view class="uP_shopImg">
									<image :src="item1.main_imgurl" mode=""></image>
									<view class="uP_shop5D" @click.stop="">
										<view class="uP_5Dicon iconfont icon-tubiaozhizuomoban"></view>
										5D
									</view>
								</view>
								<view class="uP_shopTxt">
									<view class="uP_shopTxtTop omit-1">{{item1.product_title}}</view>
									<view class="uP_shopSpec omit-1" v-if="!item1.attribute[0].attr_name"><span v-for="(i,v) in item1.attribute">{{i.value+' / '}}</span></view>
									<view class="uP_shopSpec omit-1" v-else><span v-for="(i,v) in item1.attribute">{{i.attr_name+':'+i.attr_value+'; '}}</span></view>
									<view class="uP_shopPrice">
										<view>
											￥{{item1.price}}
											<span>￥{{item1.primary_price}}</span>
										</view>
										<span class="uP_shopNum">x{{item1.pay_num}}</span>
									</view>
								</view>
							</view>
							<!-- 每一件产品的border -->
							<view class="uP_shopInfoBorder" v-if="item.medical_list.length>1"></view>
						</view>
						<!-- 每一家店铺的border -->
						<view class="uP_shopBorder"><view></view></view>
					</view>
				</view>
				<!-- 订单号 -->
				<view class="uP_orderNum">
					<!-- 订单号：128937912369106 -->
					<span>原价：¥{{primary_price}}</span>
				</view>
			</view>
			
			<!-- 配送方式 -->
			<view class="sendType">
				配送方式
				<view class="right">
					<view class="btn" :class="{'active':sendStatue==2}" @click="selfSend">自提</view>
					<view class="btn" :class="{'active':sendStatue==1}" @click="shopSend">送货上门</view>
				</view>
			</view>
			<!-- 配送地址 -->
			<view class="sendAddress" v-if="sendStatue==1" @click="toSelectAddress">
				<!-- 配送地址 -->
				<view class="addressInfo">
					<template v-if="Object.keys(addressInfo).length">
						<view class="name">{{addressInfo.name}} {{addressInfo.mobile}}</view>
						<view class="region">{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.area}}</view>
						<view class="address">{{addressInfo.address}}</view>
					</template>
					<template v-else>
						<view>请选择收货地址</view>
					</template>
				</view>
				<u-icon name="arrow-right" size="30" color="#0A0605"></u-icon>
			</view>
			<!-- 支付方式 -->
			<view class="paycont">
				<view class="paytop">付款方式</view>
				<view class="paybox">
					<view class="left-box"><text class="weixin"></text>微信支付</view>
					<view class="right-box">
						<label class="radio">
						    <radio style="transform:scale(0.85)" @click="radioChange(1)" :checked="tapIndex==1" color="#C3AB7C"></radio>
						</label>
					</view>
				</view>
				<view class="paybox">
					<view class="left-box"><text class="xianxia"></text>线下支付</view>
					<view class="right-box">
						<label class="radio">
						    <radio style="transform:scale(0.85)" @click="radioChange(2)" :checked="tapIndex==2" color="#C3AB7C"></radio>
						</label>
					</view>
				</view>
			</view>
			<!-- 二维码 -->
			<view class="qrcodepop" :style="showModal?'':'display:none;'">
				<view class="qrcodecont">
					<view class="qrname">
						<view>核销二维码</view>
						<view><canvas  canvas-id="myQrcode"></canvas></view>
					</view>
					<view class="iconfont icon-close" @click="handleHideCodeClick"></view>
				</view>
			</view>
		</view>
		
		<!-- 支付按钮 -->
		<view class="uP_payBtn">
			<view class="uP_payBtnOn">
				<view class="uP_payPrice">
					<span class="allPrice" v-if="payType==1">总价：¥{{needPrice}}</span>
					优惠：¥{{coupon_price}}
					<template v-if="payType==0">
						<span>实付：¥{{needPrice}}</span>
					</template>
					<template v-else>
						<span>需付定金：¥{{deposit_money}}</span>
					</template>
				</view>
				<template v-if="!root">
					<view @click="to" class="uP_nowPay">
						立即支付
					</view>
				</template>
				<template v-else>
					<button class="uP_nowPay" open-type="share">
						转发支付
					</button>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue';
	import service_mall from '@/service/mall.js';
	import service_address from '@/service/address.js';
	const qrCode = require('@/utils/weapp-qrcode.js')
	export default{
		components:{
			navBar
		},
		data(){
			return{
				shopList:[],
				single_id:null,
				coupon_price:null, //已优惠金额
				needPrice:null, //实付价格
				primary_price:null, //原价
				deposit_money:null, //定金
				payStatus:true, //清单列表转过来的是否用户支付
				root:false,
				sendStatue:2,//配送方式，1自提，2物流
				addressInfo:{},
				payType:0, //是否一次性支付
				tapIndex:1,
				showModal:false,
				order_codes:'',
				code:'',
				terminal:"",
			}
		},
		
		onLoad(options) {
			this.$utils.getUrl()
			let scene= decodeURIComponent(options.scene) //二维码扫码时的参数
			console.log(scene,'二维码参数')
			console.log(options,'转发时参数')
			scene = scene.split("&");
			let obj = {}
            let app = getApp()
			for(let i = 0;i<scene.length;i++){
				let newscene = scene[i].split("=");
				obj[newscene[0]] = newscene[1];
			}
			console.log(app,'======')
			console.log(app.globalData.single_id,'用户支付single_id---')
			if(obj.single_id){
				this.single_id = obj.single_id
				this.root = false
			}else if (options.single_id){
				this.single_id = options.single_id
				this.root = options.root=='true'?true:false
			}else if (app.globalData.single_id){
				this.single_id = app.globalData.single_id
				this.root = true
			}
			let token = uni.getStorageSync('token');
			if(!token){
				uni.setStorageSync('single_id',this.single_id)
				if(this.root){
					uni.setStorageSync('root','true')
				}
				uni.redirectTo({
					url: '/pages_login/pages/login/login/index',
				});
			}else{
				//#ifdef MP-WEIXIN
					this.terminal = "wxapplet";
				//#endif
				this.getListInfo()
				this.getAddress()
			}
			
		},
		// 点击分享链接
		onShareAppMessage(res) {
			console.log(res)
			// console.log(this.path)
			return {
				title: '融易装',
				path: `/pages_mall/pages/mall/userPay/userPay?single_id=${this.single_id}`,
				imageUrl:this.$static + '/static/onePlusN/logo.png',
			}
		},
		methods:{
			// 获取清单详情
			getListInfo(){
				service_mall.getSingleList({single_id:this.single_id}).then(res=>{
					console.log(res,'用户支付清单详情')
					if(res.code==1){
						let data = res.data
						this.shopList = data.list?data.list:[];
						this.primary_price = data.single.primary_price;  //原价
						this.coupon_price = data.single.coupon_price;  //已优惠金额
						this.needPrice = data.single.price;   // 实付价格
						this.deposit_money = data.single.deposit_money;   // 定金价格
						this.payType = data.single.is_many_way
						// this.getPayType()
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			
			 initQrCode:function(){
				new qrCode('myQrcode', {
					text: this.code,
					width: 160,
					height: 160,
					colorDark: "#333333",
					colorLight: "#FFFFFF",
					correctLevel: qrCode.CorrectLevel.H
				})
			},
			
			handleShowCodeClick:function(){
				this.showModal = true
				this.$nextTick(function(){
					this.initQrCode()
				})
			},
			handleHideCodeClick:function(){
				this.showModal = false
			},
			// 获取是否一次性支付
			// getPayType(){
			// 	let params = {
			// 		single_id:this.single_id,
			// 		move_way:this.sendStatue
			// 	}
			// 	service_mall.getSinglePay(params).then(res=>{
			// 		console.log(res,'是否一次性支付------')
			// 		if(res.code==1){
			// 			this.payType = res.data.is_many_way
			// 		}
			// 	})
			// },
			
			// 自提
			selfSend(){
				this.sendStatue = 2
				// this.getPayType()
			},
			
			// 物流
			shopSend(){
				this.sendStatue = 1
				// this.getPayType()
			},
			
			// 选择收货地址
			toSelectAddress(){
				uni.navigateTo({
					url:`/pages_mine/pages/my/address/list?singleOrder=true&isSelect=true&sourceFrom='singleOrder'`
				})
			},
			
			// 获取收货地址
			getAddress(){
				service_address.getlist().then(res=>{
					console.log(res,'收货地址')
					if(res.code==1){
						let defaultIndex = res.data.findIndex(item=>item.is_default==1)
						if(defaultIndex!=-1){
							this.addressInfo = res.data[defaultIndex]
							console.log(this.addressInfo,'默认地址')
						}
					}
				})
			},
			
			// 支付方式
			radioChange(t) {
				if(t == 1){
					this.tapIndex = 1
				}else{
					this.tapIndex = 2
				}
			},
			
			// 支付
			to(){
				let addressId = ''
				if(this.sendStatue==1){
					if(!Object.keys(this.addressInfo).length){
						uni.showToast({
							title:'请选择收货地址',
							icon:'none'
						})
						return
					}
					addressId = this.addressInfo.id
				}
				let params = {
					single_id:this.single_id,
					move_way:this.sendStatue,
					address_id:addressId
				}
				service_mall.toPaySingle(params).then(res=>{
					console.log(res,'支付结果')
					if(res.code==1){
						this.order_codes = res.data.order_codes
						this.getpayorder(res.data.order_codes)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			
			
			getpayorder(order_codes){
				service_mall.getpay({
					order_no:order_codes,
					type:'product_order',
					pay_type:this.tapIndex
					}).then(res=>{
						console.log(res,'支付+++++')
					if(res.code == 1){
						let data = res.data
					    if(this.tapIndex == 1){
							if(this.terminal == 'wxapplet'){
								uni.requestPayment({
									appId:res.data.appId,
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									paySign: res.data.paySign,
									signType: res.data.signType,
									timeStamp: res.data.timeStamp,
									success: (suc) => {
										uni.navigateTo({
											url: "/pages_mall/pages/mall/order/sucess?type=1" + '&order_no=' + order_codes
										})
									},
									fail: (err) => {
										uni.navigateTo({
											url: "/pages_mall/pages/mall/order/sucess?type=0" + '&order_no=' + order_codes
										})
									}
								});
							}else{
								uni.requestPayment({
									provider: 'wxpay',
									orderInfo: {
										"appid":res.data.appid,
										"partnerid": res.data.partnerid,
										"prepayid": res.data.prepayid,
										"noncestr": res.data.noncestr,
										"package": res.data.package,
										"timestamp": res.data.timestamp,
										"sign": res.data.sign,
									},
									success: (suc) => {
										uni.navigateTo({
											url: "/pages_mall/pages/mall/order/sucess?type=1" + '&order_no=' + order_codes
										})
									},
									fail: (err) => {
										uni.navigateTo({
											url: "/pages_mall/pages/mall/order/sucess?type=0" + '&order_no=' + order_codes
										})
									}
								});
							}
						}else{
							this.code = res.data.verificationCode
							this.handleShowCodeClick()
						}
										
					}else{
							this.failMsg(res)
					}	
				})
			}
		}
	}
</script>

<style lang="scss">
	page{height: 100%;}
	.userPay{
		width: 100%;
		height: 100%;
		background-color: #fff;
		margin-bottom: 40rpx;
		padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
		.contentBox{
			width: 686rpx;
			margin: 62rpx auto 196rpx;
		}
		.uP_shopList{
			width: 686rpx;
			padding: 40rpx 0rpx 26rpx;
			background-color: #F9F6F3;
			position: relative;
			border-radius: 24rpx;
			.uP_shopListTit{
				width: 394rpx;
				height: 78rpx;
				background-color: #CBAF87;
				border-radius: 32rpx;
				display: flex;
				padding: 0 106rpx;
				align-items: center;
				position: absolute;
				top: -39rpx;
				left: 146rpx;
				font: 500 36rpx/50rpx PingFang SC;
				color: #fff;
				image{width: 30rpx;height: 34rpx;margin-right: 8rpx;}
			}
			.uP_roomShop{
				.uP_roomNameBorder{
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 2rpx solid #fff;
					padding: 0 24rpx 0 26rpx;
					.uP_roomName{
						display: flex;
						align-items: center;
						padding: 30rpx 0rpx 28rpx;
						font: 600 30rpx/40rpx PingFang SC;
						color: #1A1C20;
						image{width: 34rpx; height: 34rpx;margin-right:16rpx; padding: 8rpx 8rpx;width: 50rpx;height: 50rpx;background-color: #fff;border-radius: 50%;}
						.uP_roomInfo{
							p{
								font: 400 22rpx/32rpx PingFang SC;
								color: #A0A0A0;
							}
						}
					}
					.uP_goRoom{
						width: 76rpx;
						height: 44rpx;
						border: 2rpx solid #E7DEC8;
						border-radius: 22rpx;
						color: #CBAF87;
						text-align: center;
						font: 500 22rpx/42rpx PingFang SC;
						view{font-size: 22rpx;}
						width: 76rpx;
						margin-left: 16rpx;
					}
				}
				.uP_shop{
					padding-left: 24rpx;
					.uP_shopInfo{
						padding: 26rpx 24rpx 16rpx 0;
						display: flex;
						.uP_shopImg{
							image{width: 170rpx;height: 170rpx;}
							margin-right: 24rpx;
							position: relative;
							.uP_shop5D{
								.uP_5Dicon{font-size: 18rpx;height: 24rpx;}
								padding: 6rpx 0;
								width: 64rpx;
								height: 64rpx;
								border-radius: 50%;
								position: absolute;
								top: 0;
								bottom: 0;
								left: 0;
								right: 0;
								margin:auto;
								background-color: rgba(0,0,0,0.2);
								border: 2rpx solid rgba(255,255,255,0.2);
								color: #fff;
								display: flex;
								flex-direction: column;
								align-items: center;
								font: 400 18rpx/32rpx PingFang SC;
							}
						}
						.uP_shopTxt{
							width: 100%;
							color: #1A1C20;
							display: flex;
							flex-direction: column;
							.uP_shopTxtTop{width: 444rpx;}
							.uP_shopSpec{font: 500 24rpx/34rpx PingFang SC;color: #939393;}
							font: 600 28rpx/40rpx PingFang SC;
							.uP_shopPrice{
								display: flex;
								margin-top: 48rpx;
								align-items: center;
								justify-content: space-between;
								view{
									font: bold 32rpx/44rpx PingFang SC;
									color: #EF5854;
									span{text-decoration: line-through;font: bold 22rpx/36rpx PingFang SC;color: #C6C6C6;}
								}
								.uP_shopNum{
									width: 72rpx;
									height: 42rpx;
									background-color: #fff;
									border-radius: 8rpx;
									text-align: center;
									line-height: 42rpx;
								}
							}
						}
					}
					.uP_shopInfoBorder{width: 100%;height: 0; border-bottom: 2rpx solid #fff;}
				}
				.uP_shopBorder{
					padding: 0 24rpx;
					view{
						width: 100%;
						height: 16rpx;
						background-color: #fff;
						border-radius: 8rpx;
					}
				}
			}
			// 订单号
			.uP_orderNum{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				margin-top: 26rpx;
				padding: 0 24rpx;
				font: 500 24rpx/34rpx PingFang SC;
				color: #939393;
				span{font: 500 32rpx/44rpx PingFang SC;color: #666666;}
			}
		}
		// 配送方式
		.sendType{
			margin-top: 24rpx;
			width: 686rpx;
			padding: 28rpx 24rpx;
			border-radius: 16rpx;
			background-color: #F9F6F3;
			font: 400 26rpx/40rpx PingFang SC;
			color: #0A0605;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.right{
				display: flex;
				align-items: center;
				.btn{
					width: 160rpx;
					margin-left: 16rpx;
					height: 56rpx;
					background-color: #fff;
					text-align: center;
					border-radius: 32rpx;
					font: 400 22rpx/56rpx PingFang SC;
					color: #A0A0A0;
					border: 2rpx solid #fff;
				}
				.active{
					border-color: #CBAF87;
					color: #CBAF87;
				}
			}
		}
		
		// 配送地址
		.sendAddress{
			margin-top: 2rpx;
			width: 686rpx;
			padding: 28rpx 24rpx;
			border-radius: 16rpx;
			background-color: #F9F6F3;
			font: 400 26rpx/40rpx PingFang SC;
			color: #0A0605;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.addressInfo{
				// margin-left: 50rpx;
				.name{font-size: 28rpx;}
			}
		}
		.paycont{
			// background: #fff;
			background-color: #F9F6F3;
			padding: 10rpx 20rpx ;
			padding-bottom: 80rpx;
			.paytop{font-size: 28rpx;color: #999;line-height: 60rpx;}
			.paybox{
				line-height: 100rpx;
				height: 100rpx;
				.left-box{
					display: inline-block;
					float: left;
					.weixin{
						display: block;
						float: left;
						margin-right: 15rpx;
					  width:60rpx;
					  height: 60rpx;
					  margin-top: 20rpx;
					  background: url(@/static/my/weixin.png) no-repeat center center #8BC37A;
					  background-size: 40rpx;
					  border-radius: 8rpx;
					}
					.xianxia{
						display: block;
						float: left;
						margin-right: 15rpx;
					  width:60rpx;
					  height: 60rpx;
					  margin-top: 20rpx;
					  background: url(@/static/my/xianxia.png) no-repeat center center #C3AB7C;
					  background-size: 40rpx;
					  border-radius: 8rpx;
					}
				}
				.right-box{
					float: right;
				}
			}
		}	
		.qrcodepop{
			position: fixed;
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.2);
			z-index: 9999;
			.qrcodecont{
				width: 400rpx;
				position: absolute;
				left: 50%;
				top: 25%;
				margin-left: -200rpx;
				.qrname{
					background: #fff;
					line-height: 80rpx;
					height: 440rpx;
					overflow: hidden;
					padding: 20rpx;
					text-align: center;
					border-radius: 15rpx;
					canvas{
						width: 300rpx;
						height: 300rpx;
						margin: auto;
					}
				}
				.icon-close{
					display: block;
					font-size: 60rpx;
					color: #fff;
					text-align: center;
					margin: 30rpx auto;
				}
			}
		}	
		.uP_payBtn{
			width: 100%;
			height: 176rpx;
			position: fixed;
			bottom: 0;
			background-color: #fff;
			left: 0;
			height: calc(176rpx+ constant(safe-area-inset-bottom));///兼容 IOS<11.2/
			height: calc(176rpx + env(safe-area-inset-bottom));///兼容 IOS>11.2/
			padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
			.uP_payBtnOn{
				width: 686rpx;
				height: 166rpx;
				margin: 0 auto;
				background-color: #1A1C20;
				border-radius: 8rpx;
				padding: 28rpx 36rpx 26rpx 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.uP_payPrice{
					display: flex;
					flex-direction: column;
					font: 400 40rpx/50rpx PingFang SC;
					color: #E9423E;
					.allPrice{font-size: 30rpx;}
					span{color: #fff;}
				}
				.uP_nowPay{
					width: 168rpx;
					height: 70rpx;
					border: 2rpx solid #fff;
					border-radius: 12rpx;
					background-color: #E9423E;
					font: 500 28rpx/70rpx PingFang SC;
					color: #fff;
					text-align: center;
				}
				button{
					margin: 0;
					padding: 0;
				}
			}
		}
	}
</style>
